<template>
  <div></div>
</template>

<script setup lang="ts">
/**
 * 定义对象
 * 接口 interface
 * 可选属性 name?: string
 * 只读属性 readonly a: number
 * 任意属性 [propName: string]:any/string  propName: string 属性名是字符串
 * 函数 fn: () => number;
 */
interface Person {
  name?: string; // 可选属性
  age: number; // 确定属性
  [propName: string]: any; // 确定属性和可选属性的类型都必须是它的类型的子集
  readonly a: number;
  fn: () => number; // 可选方法在调用的时候会报警告
}
let person1: Person = {
  age: 18,
  c: 34,
  d: 234,
  a: 32,
  fn: () => 123
};

// person1.a = 34; // 警告，a为只读
console.log(person1.a, person1.fn());

console.log('**********************************************************');

/**
 * 定义数组
 * 1. 类型[] let arr:number[]=[1,2,3]
 * 2. 数组泛型 Array<类型> const arr1:Array<number>=[1,2,3]
 * 3. 接口表示数组 [index: number]: any;
 * 4. 多维数组 arr3:number[][]
 * 5. arguments类数组 arguments 是一个类数组对象，它包含了函数调用时传递给函数的参数列表。
 */

let arr: number[] = [1, 2, 3]; // number 类型数组
// arr.unshift('11'); // 警告 操作方法添加的值为字符串也不行
const arr1: Array<number> = [1, 2, 4];

interface NumberArray {
  [index: number]: any; // 索引为数字就是数组
}
const arr2: NumberArray = [1, 2, '2'];

const arr3: number[][] = [
  [1, 2],
  [3, 4]
];
// 使用类数组定义数组
function fn1(a: number, ...args: any): void {
  // 将 arguments 转换成数组
  let arr: IArguments = args;
  arr.forEach((element: number) => {
    console.log(element);
  });
  console.log('arr', arr);
}
fn1(1, 2, 3);

/**
 * 函数
 * 1.function():void={}
 * 2.接口定义函数
 *   interface Add {
      (num:  number, num2: number): number
     }
 */

/**
 * 联合类型 let myPhone: number | string  = '010-820'
 * 交叉类型 
 * 类型断言
      语法：值 as 类型 或 <类型>值  value as string  <string>value
 */

// ref 定义
import { ref } from 'vue';
// const name = ref<number>(0);
const name: number = 0;
</script>

<style scoped lang="scss"></style>
